<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行级元素</title>
</head>
<body>
    <!-- 块级元素：（相当于执行了display：block；操作）：
    1）独占一行，宽高是可控的 如果没有设置其宽度将默认铺满整行
    2）其内可以包含块级和行级标签
-->
<!-- 行级元素：（相当于执行了display：inline；操作）：
    1）不会独占一行
    2）与相邻的行级元素占同一行 直到当前行占满自动到下一行
    3）宽度和高度是不可控的
    4）其内只能包含行级元素
 -->
    <div>div</div>
    <div>div</div>

    <p>p</p>
    <p>p</p>
    
    <p style="width: 300px; height:50px;background:green">p</p>
    <!-- 对块级标签和行级标签设置相同的宽高 但显示效果不同 -->
    <strong>strong</strong>
    <span>span</span>
    <span style="width: 300px; height:50px;background:green">span</span>
   
    <!-- 块级标签转换为行级标签 设置display属性为inline --> 
    <p style="width: 300px; height:50px;background:green;display:inline">块级标签转换为行级标签</p>

    <!-- 行级标签转换为块级标签 设置display属性为block-->
    <span style="width: 300px; height:50px;background:green;display:block">行级标签转换为块级标签</span>
</body>
</html>